<template>
	<!-- 布局容器 -->
	<el-container style="height: 100%;">
		<!-- 头部 -->
		<el-header style="text-align: right; font-size: 12px">
			<el-dropdown>
				<i class="el-icon-setting" style="margin-right: 15px"></i>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>
						<span @click="exit()">安全退出</span>
					</el-dropdown-item>
					<el-dropdown-item>
						<span @click="openUpdate()">修改密码</span>
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span>{{name}}</span>
		</el-header>

		<el-container>
			<!-- 操作菜单 -->
			<el-aside width="200px">
				<!-- 开启菜单路由-->
				<el-menu :default-openeds="['1', '3']" router>
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-message"></i>操作菜单</template>
						<el-menu-item-group>
							<el-menu-item :index="menu.url" v-for="(menu,index) in menuList" :key="index">
								{{menu.name}}
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
		<updatePass ref="updatePassDilog"></updatePass>
	</el-container>
</template>

<script>
	import updatePass from "./myinf.vue"
	export default {
		components: {
			updatePass
		},
		name: "success",
		data: function() {
			return {
				name: "",
				menuList: []
			}
		},
		methods: {
			//修改密码
			openUpdate() {
				this.$refs.updatePassDilog.dialogVisible = true; //调用子组件
			},
			/* 安全退出 */
			exit() {
				this.$confirm('您确定退出吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.sessionStorage.clear();
					this.$message({
						type: 'success',
						message: '成功退出!'
					});
					/* 跳转到门户网站 */
					this.$router.push("/homepage");
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			}
		},
		created() {
			var _this = this
			/* 获取登录的账号 */
			this.name = window.sessionStorage.getItem("name")
			/* 向后端发送请求查询菜单列表 */
			this.$http.get("/user/findMenuList").then(function(res) {
				_this.menuList = res.data.menuList;
			})
		}
	}
</script>

<style>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #aaaaff;
		background-color: #B3C0D1;
	}
</style>
